<template>
  <div id="home">
    <div class="home-navbar">
      <navbar class="home-nav">
        <template v-slot:center>
          <div>购物街</div>
        </template>
      </navbar>
    </div>
    <tabcontrol :titles="titles" 
                  @tabClick='tabClick' 
                  ref="tabcontrolB"
                  class="tabControl"
                 v-show="tabIsShow">
    </tabcontrol>
    <scroll class="content" 
            ref="scroll" :probeType='3' 
            @homescroll="showbtn" 
            :pullUpLoad='true'
            @pullingUp='loadmore'>
      <div class="home-banner">
        <HomeSwiper :banners="banners" @homeSwiperImgLoad='swiperImgLoad'></HomeSwiper>
      </div>
      <HomeRecommend :recommends='recommends'></HomeRecommend>
      <feature></feature>
      <tabcontrol :titles="titles" 
                  @tabClick='tabClick' 
                  ref="tabcontrol">
        </tabcontrol>
      <goods-list :goods='goods[currentType].list'></goods-list>
    </scroll>
    <backtop @click="backTopClick" v-show="backTopIsShow"></backtop>
  </div>
</template>

<script>
import {getHomeData,getGoods} from 'network/home.js'
//引入网络请求
import navbar from 'components/common/navbar/navbar.vue'
//引入navbar组件
import HomeSwiper from 'views/home/components/HomeSwiper'
//引入轮播图组件
import HomeRecommend from 'views/home/components/HomeRecommend'
//引入recommend组件
import feature from 'views/home/components/feature.vue'
//引入feature组件
import tabcontrol from '../../components/content/tabcontrol/tabcontrol.vue'
//引入tabcontrol组件
import goodsList from 'components/content/goods/goodsList.vue'
//引入goods组件
import scroll from 'components/common/scroll/scroll.vue'
//引入封装好的better-scroll组件
import backtop from 'components/content/backTop/backtop.vue'
//引入返回顶部按钮

export default {
    name:'home',
    //注册组件
    components:{
      navbar,
      HomeSwiper,
      HomeRecommend,
      feature,
      tabcontrol,
      goodsList,
      scroll,
      backtop
    },
    data(){
      return {
        banners:[],
        recommends:[],
        titles:['流行','新款','精选'],
        goods:{
          'pop':{page:0,list:[]},
          'new':{page:0,list:[]},
          'sell':{page:0,list:[]}
        },
        currentType:'pop',
        backTopIsShow:false,
        tabOffsetTop:0,
        tabIsShow:false,
        scrolly:0
      }
    },
    mounted(){
      // console.log(this.$refs.tabcontrol.$el.offsetTop);
    },
    created(){
      this.gethomedata()
      this.getgoods('pop')
      this.getgoods('new')
      this.getgoods('sell')
    },
    activated(){
      this.$refs.scroll.scroll.refresh()
      this.$refs.scroll.scroll.scrollTo(0,this.scrolly,3)
    },
    deactivated(){
      this.scrolly = this.$refs.scroll.scroll.y
    },
    methods:{
      //网络请求事件
      gethomedata(){
        getHomeData().then(res =>{
          this.banners = res.data.banner.list
          this.recommends = res.data.recommend.list
      })},
      getgoods(type){
        const page = this.goods[type].page + 1
        getGoods(type,page).then(res =>{
        // console.log(res.data.list);
        this.goods[type].list.push(...res.data.list)
        this.goods[type].page += 1
        this.$refs.scroll.scroll.finishPullUp()
        this.$refs.scroll.scroll.refresh()
      })},

      //其他事件
      tabClick(index){
        if(index === 0) {
          this.currentType = 'pop'
        }else if(index === 1) {
          this.currentType = 'new'
        }else {
          this.currentType = 'sell'
        };
        this.$refs.tabcontrol.clickIndex = index
        this.$refs.tabcontrolB.clickIndex = index
      },
      backTopClick(){
        this.$refs.scroll.scroll.scrollTo(0,0,500)
      },
      showbtn(position){
        this.backTopIsShow = position.y<-1000

        //tabcontrol吸顶
        this.tabIsShow = position.y<-this.tabOffsetTop
      },
      loadmore(){
        this.getgoods(this.currentType)
      },
      swiperImgLoad(){
        this.tabOffsetTop = this.$refs.tabcontrol.$el.offsetTop;
      },
    }
}
</script>

<style scoped>
  #home {
    padding-top: 44px;
  } 
  .home-nav {
    background-color: var(--color-tint);
    color: white;
  }
  .home-nav {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
  }
  .content {
    position: absolute;
    top: 44px;
    bottom: 49px;
    left: 0;
    right: 0;
  }
  .tabControl {
    position: relative;
    z-index: 9;  
  }
</style>